<template>
  <view class="greetings">
    <uni-forms :model="form" label-width="auto" style="max-width: 600px">
      <view class="forms-item-c">
        <uni-forms-item label="日期">
          <DatePicker
            :show.sync="showPicker"
            :show-time="true"
            @change="onDateChange"
          />
        </uni-forms-item>
      </view>

      <view class="forms-item-c">
        <uni-forms-item label="性别">
          <radio-group class="radio-wrap" @change="radioChange">
            <view>
              <radio
                color="#A14340"
                activeBackgroundColor="#8a4600"
                value="1"
                checked
              ></radio>
              <text class="text">男</text>
            </view>
            <view>
              <radio color="#A14340" value="0"></radio>
              <text class="text">女</text>
            </view>
          </radio-group>
        </uni-forms-item>
      </view>

      <view class="btn-wrap" @click="subForm"></view>
    </uni-forms>
    <uni-popup ref="popup" type="message">
      <uni-popup-message
        type="warn"
        message="请输入日期"
        :duration="2000"
      ></uni-popup-message>
    </uni-popup>
  </view>
</template>
<script>
import DatePicker from "./DatePicker.vue";
export default {
  props: {
    msg: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      info: {},
      form: {
        birth: "",
        gender: "1",
      },
      showPicker: false,
    };
  },
  components: { DatePicker },

  methods: {
    subForm() {
      console.log(this.form.birth);
      if (!this.form.birth) {
        this.$refs.popup.open();
        return;
      }
      this.$store.dispatch("setBirth", this.form.birth);
      this.$store.dispatch("setGender", this.form.gender);

      uni.navigateTo({
        url: "/subPackages/paipan/EightGodView",
      });
    },
    radioChange(e) {
      this.form.gender = e.detail.value;
    },
    onDateChange(result) {
      console.log("最终日期(公历):", result.date);
      console.log("日历类型:", result.calendarType);
      console.log("返回格式化的日期:", result.formattedDate);
      this.form.birth = result.formattedDate;
    },
  },
  options: {
    styleIsolation: "shared",
  },
};
</script>

<style lang="scss" scoped>
h1 {
  font-weight: 500;
  font-size: 2.6rem;
  position: relative;
  top: -10px;
}

h3 {
  font-size: 1.2rem;
}
.greetings {
  padding: 0 60rpx;
}
.greetings h1,
.greetings h3 {
  text-align: center;
}

@media (min-width: 1024px) {
  .greetings h1,
  .greetings h3 {
    text-align: left;
  }
}
.forms-item-c {
  height: 80rpx;
  padding: 0 32rpx;
  margin-bottom: 30rpx;
  background-color: #fdfcf2;
  border-radius: 12rpx;
  ::v-deep .uniui-calendar {
    position: absolute;
    right: 0;
    color: #e4a972 !important;
  }
  ::v-deep .icon-calendar {
    display: flex;
    align-items: center;
  }
  ::v-deep .uni-date__x-input {
    text-align: right;
    padding-right: 60rpx;
    color: #948d86;
    font-size: 30rpx;
  }
}

.radio-wrap {
  width: 250rpx;
  display: flex;
  justify-content: space-between;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  .text {
    font-size: 30rpx;
    padding-left: 15rpx;
  }
}
.btn-wrap {
  width: 100%;
  height: 140rpx;

  background-image: url("/static/image/paipan/btn1.png");
  background-size: auto;
  background-repeat: no-repeat;
  background-position-x: center;
}
</style>
